// Styles for the generic elements included in every page through the templates.

body {
  color: $foreground-color;
  background-color: $background-color;
}

header {
  background-color: $header-bg-color;
  border-bottom: 1px solid $edge-color;

  div {
    display: flex;
    flex-flow: row nowrap;
    flex-basis: auto;
    flex-grow: 1;
    align-items: center;

    h1 {
      margin: 0 0 0 auto;
      font-weight: 400;
      font-size: 1.3rem;
      text-align: right;
    }
  }
}

.header-logo-lg {
  display: block;
  width: 260px;
  margin: 8px 0;

  @media screen and (max-width: $breakpoint) {
    display: none;
  }
}

.header-logo-sm {
  display: none;
  margin: 8px 0;

  @media screen and (max-width: $breakpoint) {
    display: block;
  }
}

footer {
  font-size: 80%;
  border-top: 1px solid $edge-color;
  display: flex;
  flex-flow: row nowrap;
  flex-basis: auto;
  align-items: center;

  p {
    flex-grow: 1;
  }

  a.footer-icon {
    display: block;
    width: 20px;
    height: 20px;
    margin: 0 4px;
    font-size: 20px;
    padding: 0;

    color: $foreground-color;

    i {
      margin: 0;
    }
  }
}
